import React, { Component } from 'react';
import {get_allcity} from '../../api/index'
import {NavLink} from "react-router-dom"
class All_d extends Component {
    constructor(){
        super()
        this.state={
            allcity_name:{}
        }
    }
    componentDidMount(){
        get_allcity()
        .then(res=>{
            // console.log(res.data)
            this.setState({
                allcity_name:res.data
            })
        })
    }
    tochange(did){
        console.log(did)
    }
    clickto(val){
        return (
           
                <li key={val.id} onClick={this.tochange.bind(this,val.id)}>
                    <NavLink to={'/city/'+val.id}>
                        {val.name}
                    </NavLink>
                </li>
           
        )
    }
    render() {
        let city_name_A,city_name_B,city_name_C,city_name_D,
        city_name_E,city_name_F,city_name_G,city_name_H,
        city_name_J,city_name_K,city_name_L,city_name_M,city_name_N,
        city_name_P,city_name_Q,city_name_R,city_name_S,
        city_name_T,city_name_W,city_name_X,
        city_name_Y,city_name_Z
            if(Object.keys(this.state.allcity_name)==false){
                city_name_A=null
            }else{
                city_name_A=this.state.allcity_name['A'].map(val=>{
                    return (
                        this.clickto(val)
                    )
                })
                city_name_B=this.state.allcity_name.B.map(val=>{
                    return (
                        this.clickto(val)
                    )
                })
                // console.log(typeof city_name_B)
                city_name_C=this.state.allcity_name.C.map(val=>{
                    return (
                        this.clickto(val)
                    )
                })
                city_name_D=this.state.allcity_name.D.map(val=>{
                    return (
                        this.clickto(val)
                    )
                })
                city_name_E=this.state.allcity_name.E.map(val=>{
                    return (
                        this.clickto(val)
                    )
                })
                city_name_F=this.state.allcity_name.F.map(val=>{
                    return (
                        this.clickto(val)
                    )
                })
                city_name_G=this.state.allcity_name.G.map(val=>{
                    return (
                        this.clickto(val)
                    )
                })
                city_name_H=this.state.allcity_name.H.map(val=>{
                    return (
                        this.clickto(val)
                    )
                })
                city_name_J=this.state.allcity_name.J.map(val=>{
                    return (
                        this.clickto(val)
                    )
                })
                city_name_K=this.state.allcity_name.K.map(val=>{
                    return (
                        this.clickto(val)
                    )
                })
                city_name_L=this.state.allcity_name.L.map(val=>{
                    return (
                        this.clickto(val)
                    )
                })
                city_name_M=this.state.allcity_name.M.map(val=>{
                    return (
                        this.clickto(val)
                    )
                })
                city_name_N=this.state.allcity_name.N.map(val=>{
                    return (
                        this.clickto(val)
                    )
                })
                city_name_P=this.state.allcity_name.P.map(val=>{
                    return (
                        this.clickto(val)
                    )
                })
                city_name_Q=this.state.allcity_name.Q.map(val=>{
                    return (
                        this.clickto(val)
                    )
                })
                city_name_R=this.state.allcity_name.R.map(val=>{
                    return (
                        this.clickto(val)
                    )
                })
                city_name_S=this.state.allcity_name.S.map(val=>{
                    return (
                        this.clickto(val)
                    )
                })
                city_name_T=this.state.allcity_name.T.map(val=>{
                    return (
                        this.clickto(val)
                    )
                })
                
                city_name_W=this.state.allcity_name.W.map(val=>{
                    return (
                        this.clickto(val)
                    )
                })
                city_name_X=this.state.allcity_name.X.map(val=>{
                    return (
                        this.clickto(val)
                    )
                })
                city_name_Y=this.state.allcity_name.Y.map(val=>{
                    return (
                        this.clickto(val)
                    )
                })
                city_name_Z=this.state.allcity_name.Z.map(val=>{
                    return (
                        this.clickto(val)
                    )
                })
            }
          
           
        

      return (
        <div className='all_d'>
           <h3>A(按字母排序)</h3>
           <ul className='all_list_1'>{city_name_A}</ul>
           <h3>B</h3>
           <ul className='all_list_1'>{city_name_B}</ul>
           <h3>C</h3>
           <ul className='all_list_1'>{city_name_C}</ul>
           <h3>D</h3>
           <ul className='all_list_1'>{city_name_D}</ul>
           <h3>E</h3>
           <ul className='all_list_1'>{city_name_E}</ul>
           <h3>F</h3>
           <ul className='all_list_1'>{city_name_F}</ul>
           <h3>G</h3>
           <ul className='all_list_1'>{city_name_G}</ul>
           <h3>H</h3>
           <ul className='all_list_1'>{city_name_H}</ul>           
           <h3>J</h3>
           <ul className='all_list_1'>{city_name_J}</ul>
           <h3>K</h3>
           <ul className='all_list_1'>{city_name_K}</ul>
           <h3>L</h3>
           <ul className='all_list_1'>{city_name_L}</ul>
           <h3>M</h3>
           <ul className='all_list_1'>{city_name_M}</ul>
           <h3>N</h3>
           <ul className='all_list_1'>{city_name_N}</ul>        
           <h3>P</h3>
           <ul className='all_list_1'>{city_name_P}</ul>
           <h3>Q</h3>
           <ul className='all_list_1'>{city_name_Q}</ul>
           <h3>R</h3>
           <ul className='all_list_1'>{city_name_R}</ul>
           <h3>S</h3>
           <ul className='all_list_1'>{city_name_S}</ul>
           <h3>T</h3>
           <ul className='all_list_1'>{city_name_T}</ul>
           <h3>W</h3>
           <ul className='all_list_1'>{city_name_W}</ul>
           <h3>X</h3>
           <ul className='all_list_1'>{city_name_X}</ul>
           <h3>Y</h3>
           <ul className='all_list_1'>{city_name_Y}</ul>
           <h3>Z</h3>
           <ul className='all_list_1'>{city_name_Z}</ul>
        </div>
      );
    }
  }
  export default All_d

